<template>
  <div>
    <!-- 第5步 -->
    <div
      class="onboardingGuide_step1"
      v-if="show && step == 5"
      :style="guideStyle_Step5"
    >
      <div
        :class="[
          'transtion',
          'onboardingGuide_step5_tip1',
          step == 5 ? 'opacity1' : 'opacity0',
        ]"
        :style="guideStyle_Step5"
      >
        点击“编辑”为课程配置新的计分项目部分配分项要在排课时设置初始分
      </div>
    </div>
    <div
      v-if="show && step == 5"
      class="step1Click shou"
      :style="guideStyle_Step1"
      @click="step5Click"
    ></div>
    <!-- 第四步 -->
    <div
      class="onboardingGuide_step1"
      v-if="show && step == 4"
      :style="guideStyle_Step4"
    >
      <div
        :class="[
          'transtion',
          'onboardingGuide_step4_tip1',
          step == 4 ? 'opacity1' : 'opacity0',
        ]"
        :style="guideStyle_Step4"
      >
        点击“课程配分”查看新的课配分项目
      </div>
    </div>
    <div
      v-if="show && step == 4"
      class="step1Click shou"
      :style="guideStyle_Step1"
      @click="step4Click"
    ></div>
    <!-- 第一步引导 -->
    <div
      class="onboardingGuide_step1"
      v-if="show && step == 1"
      :style="guideStyle_Step1"
    >
      <div
        :class="[
          'transtion',
          'onboardingGuide_step1_tip1',
          step == 1 ? 'opacity1' : 'opacity0',
        ]"
        :style="guideStyle_Step1"
      >
        点击“学生得分”查看学生课程中得分
      </div>
    </div>
    <div
      v-if="show && step == 1"
      class="step1Click shou"
      :style="guideStyle_Step1"
      @click="toScore"
    ></div>
    <!-- 第二步引导 -->
    <div class="onboardingGuide_step2" v-if="show && step == 2">
      <div
        :class="[
          'transtion',
          'onboardingGuide_step2_tip1',
          step == 2 ? 'opacity1' : 'opacity0',
        ]"
        :style="guideStyle_Step2"
      >
        点击左侧列表，查看每项内容学生得分
      </div>
    </div>
    <!-- 第三步引导 -->
    <div
      class="onboardingGuide_step3"
      :style="guideStyle_Step2"
      v-if="show && step == 3"
    >
      <div
        :class="[
          'transtion',
          'onboardingGuide_step3_tip1',
          step == 3 ? 'opacity1' : 'opacity0',
        ]"
        :style="guideStyle_Step2"
      >
        点击“返回”回到班级
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean, // 控制引导层是否显示
    rect: Object, // 包含 left, top, width, height 的对象
    step: [String, Number], // 引导步骤
    radius: {
      type: [String, Number],
      default: 40,
    },
  },
  data() {
    return {};
  },
  watch: {
    step: {
      handler(val) {},
      immediate: true,
    },
  },
  computed: {
    guideStyle_Step5() {
      if (!this.rect) return {};

      const { left, top } = this.rect;
      const radius = this.radius; // 使用较小的宽高的一半作为半径

      return {
        "--circleclick-left": `${left + 20 - 40}px`,
        "--circleclick-top": `${top + 15 - 40}px`,
        "--circleTip-left": `${left + 20 - 40 - 237 + 215 - 210}px`,
        "--circleTip-top": `${top + 15 - 40 + 80 - 20}px`,
        "--circle-left": `${left + 20}px`,
        "--circle-top": `${top + 15}px`,
        "--circle-radius": `${radius}px`,
      };
    },
    guideStyle_Step4() {
      if (!this.rect) return {};

      const { left, top } = this.rect;
      const radius = this.radius; // 使用较小的宽高的一半作为半径

      return {
        "--circleclick-left": `${left + 20 - 40}px`,
        "--circleclick-top": `${top + 15 - 40}px`,
        "--circleTip-left": `${left + 20 - 40 - 237 + 215}px`,
        "--circleTip-top": `${top + 15 - 40 + 80}px`,
        "--circle-left": `${left + 20}px`,
        "--circle-top": `${top + 15}px`,
        "--circle-radius": `${radius}px`,
      };
    },
    // 计算镂空圆形的位置和大小
    guideStyle_Step1() {
      if (!this.rect) return {};

      const { left, top } = this.rect;
      const radius = this.radius; // 使用较小的宽高的一半作为半径

      return {
        "--circleclick-left": `${left + 20 - 40}px`,
        "--circleclick-top": `${top + 15 - 40}px`,
        "--circleTip-left": `${left + 20 - 40 - 237}px`,
        "--circleTip-top": `${top + 15 - 40 + 80}px`,
        "--circle-left": `${left + 20}px`,
        "--circle-top": `${top + 15}px`,
        "--circle-radius": `${radius}px`,
      };
    },
    // 计算镂空圆形的位置和大小
    guideStyle_Step2() {
      if (!this.rect) return {};

      const { navTop, navLeft, navWidth, navHeight, backTop, backLeft } =
        this.rect;

      return {
        "--square-left": `${navLeft + navWidth}px`,
        "--square-top": `${navTop + 180}px`,
        "--square-width": `${navWidth}px`,
        "--square-height": `${navHeight}px`,
        "--back-left": `${backLeft + 24}px`,
        "--back-top": `${backTop + 24}px`,
        "--backTip-left": `${backLeft + 24 - 65}px`,
        "--backTip-top": `${backTop + 24 + 24}px`,
        "--back-radius": `${24}px`,
      };
    },
  },
  mounted() {
    // 如果需要在挂载时执行某些操作，可以在这里处理
  },
  methods: {
    step4Click() {
      this.$emit("step4Click", true);
    },
    step5Click() {
      this.$emit("update:show", false);
      this.$emit("step5Click", true);
    },
    toScore() {
      this.$router.push({
        path: "/studentGrade",
      });
    },
  },
};
</script>

  <style lang="scss" scoped>
.opacity1 {
  opacity: 1;
}
.opacity0 {
  opacity: 0;
}
.transtion {
  transition: all 0.3s ease-in-out;
}
.onboardingGuide_step5_tip1 {
  background: url("../assets/images/group_icon/onboardingGuide_step1.png");
  background-size: 336px 123px;
  width: 336px;
  height: 123px;
  padding: 72px 0 0 16px;
  position: fixed;
  left: var(--circleTip-left);
  top: var(--circleTip-top);
  z-index: 11000;
  box-sizing: border-box;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
}
.onboardingGuide_step4_tip1 {
  background: url("../assets/images/group_icon/onboardingGuide_step4.png");
  background-size: 380px 124px;
  width: 380px;
  height: 124px;
  position: fixed;
  left: var(--circleTip-left);
  top: var(--circleTip-top);
  z-index: 11000;
  box-sizing: border-box;
  padding: 85px 0 0 15px;

  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
}
.onboardingGuide_step3_tip1 {
  background: url("../assets/images/group_icon/onboardingGuide_step3.png");
  background-size: 230px 126px;
  width: 230px;
  height: 126px;
  position: fixed;
  left: var(--backTip-left);
  top: var(--backTip-top);
  z-index: 11000;
  box-sizing: border-box;
  padding: 87px 0 0 20px;

  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
}
.onboardingGuide_step2_tip1 {
  background: url("../assets/images/group_icon/onboardingGuide_step2.png");
  background-size: 415px 126px;
  width: 415px;
  height: 126px;
  position: fixed;
  left: var(--square-left);
  top: var(--square-top);
  z-index: 11000;
  box-sizing: border-box;
  padding: 87px 0 0 94px;

  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
}
.onboardingGuide_step1_tip1 {
  background: url("../assets/images/group_icon/onboardingGuide_step1.png");
  background-size: 336px 123px;
  width: 336px;
  height: 123px;
  padding: 83px 0 0 16px;
  position: fixed;
  left: var(--circleTip-left);
  top: var(--circleTip-top);
  z-index: 11000;
  box-sizing: border-box;

  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  font-style: normal;
}
.step1Click {
  border-radius: var(--circle-radius);
  height: 80px;
  width: 80px;
  background: rgba($color: #000000, $alpha: 0);
  position: fixed;
  z-index: 11000;
  left: var(--circleclick-left);
  top: var(--circleclick-top);
}
.onboardingGuide_step1 {
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  background: rgba($color: #000000, $alpha: 0.6);
  top: 0;
  left: 0;
  // 使用 CSS 变量动态设置 mask 位置和大小
  -webkit-mask: radial-gradient(
    circle at var(--circle-left) var(--circle-top),
    transparent var(--circle-radius),
    black calc(var(--circle-radius) + 1px)
  );
  mask: radial-gradient(
    circle at var(--circle-left) var(--circle-top),
    transparent var(--circle-radius),
    black calc(var(--circle-radius) + 1px)
  );
}
.onboardingGuide_step3 {
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  background: rgba($color: #000000, $alpha: 0.6);
  top: 0;
  left: 0;
  // 使用 CSS 变量动态设置 mask 位置和大小
  -webkit-mask: radial-gradient(
    circle at var(--back-left) var(--back-top),
    transparent var(--back-radius),
    black calc(var(--back-radius) + 1px)
  );
  mask: radial-gradient(
    circle at var(--back-left) var(--back-top),
    transparent var(--back-radius),
    black calc(var(--back-radius) + 1px)
  );
}
.onboardingGuide_step2 {
  position: fixed; /* 使用 fixed 使遮罩层覆盖整个视口 */
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  overflow: hidden; /* 隐藏超出部分 */
}
</style>
